<template>
    <div class="tree">
        <el-input v-model="filterText" style="margin-bottom: 8px;" placeholder="请输入内容" :prefix-icon="Search" />
        <el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all
            :filter-node-method="filterNode" @node-click="handleNodeClick" />
    </div>
</template>
  
<script setup lang="ts">
import { ref, watch } from 'vue'

import { ElTree } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
    children: 'children',
    label: 'label',
}

const emit = defineEmits(['treeSelect']);

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
}

const data: Tree[] = [
    {
        id: 1,
        label: '01液压类',
        children: [
            {
                id: 3,
                label: '09液压接头',
                children: [
                    {
                        id: 4,
                        label: '01直通接头',
                        children: [
                            {
                                id: 5,
                                label: '01管/管连接',
                            },
                            {
                                id: 6,
                                label: '02外螺纹油口连接',
                            },
                            {
                                id: 7,
                                label: '04组合连接',
                            },
                            {
                                id: 8,
                                label: '05旋转螺母/旋转螺母连接',
                                children: [
                                    {
                                        id: 9,
                                        label: '01旋转螺母-直通组合接头',
                                    },
                                    {
                                        id: 10,
                                        label: '02旋转螺母-组合变径接头',
                                        children: [
                                            {
                                                id: 11,
                                                label: '旋转螺母-组合变径接头',
                                            },
                                        ],
                                    },

                                ],
                            },
                        ],
                    },

                ],
            },
        ],
    },
    {
        id: 2,
        label: '02电气类',
    },
]
let lastClickTime = 0

const handleNodeClick = (data) => {
    const now = Date.now()
    const timeDiff = now - lastClickTime
    if (timeDiff < 300) {
        // 传递 id 和 label
        emit('treeSelect', { id: data.id, label: data.label });
    }
    lastClickTime = now
}
</script>
  
<style scoped>
/* .filter-tree {
    height: 100%;
    background-color: #F9FBFF;
} */
</style>
  